<template>
  <div>
    <Form :model="boothItemModel" ref="boothItemInfoForm" :label-width="120" label-colon inline :show-message="false">
      <div v-show="boothIsNavigateType">
        <FormItem label="展位顺序" prop="sequence" required>
          <Input type="number" v-model="boothItemModel.sequence" class="input_item"  placeholder="序号越小越靠前"></Input>
        </FormItem>
        <FormItem label="展位标题" prop="title" :required="boothIsNavigateType">
          <Input type="text" v-model.trim="boothItemModel.title" class="input_item" placeholder="用户可见"></Input>
        </FormItem>
      </div>
      <div v-show="!boothIsNavigateType">
        <FormItem v-if="operation.isAdd" style="width: 100%;">
          <RadioGroup type="button" v-model="operation.type">
            <Radio :label="1">手动录入</Radio>
            <Radio :label="2">从产品导入</Radio>
          </RadioGroup>
        </FormItem>
        <div v-show="!operation.isAdd || operation.type!=null">
          <FormItem label="从产品导入" v-if="isToImport || !operation.isAdd">
            <Button type="primary" @click="showProductSelectModal()">{{operation.isAdd?'便捷导入':'重新导入'}}</Button>
          </FormItem>
          <FormItem label="展位顺序" prop="sequence" :required="!boothIsNavigateType">
            <Input type="number" v-model="boothItemModel.sequence" class="input_item"  placeholder="序号越小越靠前"></Input>
          </FormItem>
          <FormItem label="展位标题" prop="title">
            <Input type="text" v-model.trim="boothItemModel.title" class="input_item" placeholder="用户可见"></Input>
          </FormItem>
          <div v-show="isUnionPlatform || isPcPlatform">
            <FormItem label="PC端展位图" prop="imagePc" :required="(isUnionPlatform || isPcPlatform) && !boothIsNavigateType">
<!--              <Input type="text" v-model="boothItemModel.imagePc" style="display: none;"></Input>-->
              <div style="width: 150px;">
                <Button type="primary" @click="selectImage(1)">选择图片</Button>
              </div>
              <div class="uploaded-img" v-if="isNotEmpty(boothItemModel.imagePc)">
                <img :src="yunPath+boothItemModel.imagePc">
                <div class="extra">
                  <Icon type="ios-close-circle" @click="deleteImage(1)"></Icon>
                </div>
              </div>
            </FormItem>
            <FormItem prop="imagePcAlt" :label-width="20" :required="(isUnionPlatform || isPcPlatform) && !boothIsNavigateType">
              <Input type="textarea" v-model="boothItemModel.imagePcAlt" style="width: 245px; resize: none;" :rows="8"
                     :maxlength="200" :show-word-limit="true" placeholder="图片描述文案,不填写代表该展位不做SEO"></Input>
            </FormItem>
          </div>
          <FormItem label="手机端展位图" prop="imageMobile" :required="!boothIsNavigateType">
<!--            <Input type="text" v-model="boothItemModel.imageMobile" style="display: none;"></Input>-->
            <div style="width: 150px;">
              <Button type="primary" @click="selectImage(2)">选择图片</Button>
            </div>
            <div class="uploaded-img" v-if="isNotEmpty(boothItemModel.imageMobile)">
              <img :src="yunPath+boothItemModel.imageMobile">
              <div class="extra">
                <Icon type="ios-close-circle" @click="deleteImage(2)"></Icon>
              </div>
            </div>
          </FormItem >
          <FormItem prop="imageMobileAlt" :label-width="20" :required="!boothIsNavigateType">
            <Input type="textarea" v-model="boothItemModel.imageMobileAlt"  style="width: 245px; resize: none;" :rows="8"
                   :maxlength="200" :show-word-limit="true" placeholder="图片描述文案,不填写代表该展位不做SEO"></Input>
          </FormItem>
        </div>
      </div>
    </Form>

    <!-- 选择图片弹窗 -->
    <Modal v-model="imageSelectModal.isShow" title="单击选择图片" footer-hide
      :styles="{top: '20px',bottom:'20px',}" width="70%" height="1000">
      <a-image :hideleft="true" @cancelClicked="hideImageSelectModal()" @sureClicked="selectedImage"></a-image>
    </Modal>

    <Modal v-model="productSelectModal.isShow" title="选择导入产品" width="1000" :mask-closable="false">
      <product-selection @query-list="queryProductList" :is-single-select="true"></product-selection>
      <div slot="footer">
        <Button @click="hideProductSelectionModal()">取消</Button>
        <Button type="primary" @click="importProductInfo()">导入</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import commonData from "./js/stand/common_data"
import {imageInit, webImageList} from "../image/js/select/image_funs";
import imageData from "../image/js/select/image_data";
import AImage from "../image/ImageSelect";
import {isNotEmpty} from "../js/commonUtils";
import ProductFilter from "./productFilter/ProductFilter";
import productData from "./productSelect/js/productData";
import ProductSelection from "./productSelect/ProductSelection";
import {queryAllProductList} from "./js/stand/booth_funs";
import {initProductPage, initProductParams} from "./productSelect/js/productFuns";

export default {
  name: "ABoothItemForm",
  props: {
    boothItemModel: {type: Object, required: true},
    boothPlatform: {type: Number, required: true},
    boothType: {type: Number, required: true},
    operation: {type: Object, required: true},
  },
  data() {
    return {
      boothItemRules: commonData.rules.boothItemRules,
      boothItemTypes: commonData.boothItemDic.types,
      collectionTypes: commonData.collectionDic.types,
      uploadUrl: this.$apiImage.getUploadToOssUrl(),
      imageSelectModal: {
        isShow: false,
        deviceType: 1,
      },
      productSelectModal: {
        isShow: false,
      },
      filterList: commonData.collectionDic.filterList,
      yunPath: this.$store.getters.imgPrefix,
    }
  },
  components: {
    AImage, ProductFilter, ProductSelection,
  },
  methods: {
    uploadImagePcSuccess(response, file, fileList) {
      this.boothItemModel.imagePc = response.result;
    },
    uploadImageMobileSuccess(response, file, fileList) {
      this.boothItemModel.imageMobile = response.result;
    },
    uploadProgress(event, file, fileList){
      this.$Spin.show();
    },
    uploadError(error, file, fileList){
      this.$Spin.hide();
    },
    selectImage(type) { // type: 1.PC端图片  2.手机端图片
      this.imageSelectModal.deviceType = type;
      this.imageSelectModal.isShow = true;
      imageInit(this, imageData, false, true, commonData.standsDic.folderType);
      imageData.tParams.folderType = commonData.standsDic.folderType;
      imageData.tParams.folderList.folderName = this.boothItemModel.showroomId;
      webImageList(this, imageData);
    },
    hideImageSelectModal() {
      this.imageSelectModal.isShow=false
    },
    selectedImage(selectedImages) {
      this.imageSelectModal.isShow = false;
      if(selectedImages.length > 0) {
        if(this.imageSelectModal.deviceType == 1) {
          this.boothItemModel.imagePc = selectedImages[0].yunKey;
        }
        if(this.imageSelectModal.deviceType == 2) {
          this.boothItemModel.imageMobile = selectedImages[0].yunKey;
        }
      }
    },
    deleteImage(deviceType) {
      if(deviceType == 1) {
        this.boothItemModel.imagePc = "";
      }
      if(deviceType == 2) {
        this.boothItemModel.imageMobile = "";
      }
    },
    isNotEmpty(val) {
      return isNotEmpty(val);
    },
    addFilter() {
      this.boothItemModel.collectionFilters.push({field: "", value: ""});
    },
    removeFilter(index) {
      this.boothItemModel.collectionFilters.splice(index, 1);
    },
    isCollectionTypeDisabled(type) {
      return type == commonData.collectionDic.categoryType;
    },
    showProductSelectModal() {
      initProductParams();
      initProductPage();
      this.productSelectModal.isShow = true;
    },
    queryProductList() {
      queryAllProductList(this);
    },
    hideProductSelectionModal() {
      this.productSelectModal.isShow = false;
    },
    importProductInfo() {
      if(productData.tData.selectedList.length < 1) {
        this.$Message.error({content: "请选择产品！", duration: 3});
        return;
      }
      let product = productData.tData.selectedList[0];
      this.boothItemModel.title = "US$"+product.minPrice;
      if(this.isUnionPlatform || this.isPcPlatform) {
        this.boothItemModel.imagePc = this.getProductImageYunKey(product);
        this.boothItemModel.imagePcAlt = product.name;
      }
      this.boothItemModel.imageMobile = this.getProductImageYunKey(product);
      this.boothItemModel.imageMobileAlt = product.name;

      this.productSelectModal.isShow = false;
    },
    getProductImageYunKey(product) {
      let showImage = product.showImage;
      if(showImage == null) {
        return "";
      }
      let imgUrl = "";
      if(showImage.zipImages!=null && showImage.zipImages!='') {
        let zipImages = this.$toJson(showImage.zipImages);
        for(let zipImg of zipImages) {
          if(zipImg.size == "450w") {
            imgUrl = zipImg.imagePath;
            break;
          }
        }
      }

      if(imgUrl == "") {
        imgUrl = showImage.originalImagePath;
      }
      return imgUrl;
    },
  },
  computed: {
    isToImport() {
      return this.operation.type == 2;
    },
    isUnionPlatform() {
      return this.boothPlatform == commonData.standsDic.unionPlatform;
    },
    isPcPlatform() {
      return this.boothPlatform == commonData.standsDic.pcPlatform;
    },
    isAppPlatform() {
      return this.boothPlatform == commonData.standsDic.appPlatform;
    },
    boothIsNavigateType() {
      return this.boothType == commonData.boothDic.navigateType;
    },
    targetValueLabel() {
      let element = commonData.boothItemDic.types.find(element => element.value==this.boothItemModel.targetType);
      return element==null ? "" : element.label;
    },
    isShowTargetValue() {
      return this.isHtmlType;
    },
    isCollectionType() {
      return this.boothItemModel.targetType == commonData.boothItemDic.collectionType;
    },
    isHtmlType() {
      return this.boothItemModel.targetType == commonData.boothItemDic.htmlType;
    },
    isShowroomType() {
      return this.boothItemModel.targetType == commonData.boothItemDic.showroomType;
    },
    isKeywordType() {
      return this.boothItemModel.collectionType == commonData.collectionDic.keywordType;
    },
    isCategoryType() {
      return this.boothItemModel.collectionType == commonData.collectionDic.categoryType;
    },
    isCustomType() {
      return this.boothItemModel.collectionType == commonData.collectionDic.customType;
    }
  },
}
</script>


<style lang="less" scoped>
@import  (once,optional)  "../css/base.less";

.input_item{
  width:400px;
  @media @mobile{
    width: 200px;
  }
}

.uploaded-img {
  width: 150px;
  height: 135px;
  text-align: center;
  line-height: 130px;
  margin-top: 10px;
  border: 1px solid #ccc;
  img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }
  .extra {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    color: #ccc;
    background-color: #ffffff;
    margin-top: -15px;
    margin-right: -5px;
  }
  .extra :hover {
    color: #333;
    cursor: pointer;
  }
}
</style>
